<link rel="import" href="bower_components/iron-a11y-keys/iron-a11y-keys.html">

<dom-module
  id="watch-states" >

  <template><content></content></template>

<script>

Polymer({
  is: "watch-states",
  behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

  properties: {
    triggers: {
      type: Object
    }
  },

  getAttr: function (elem, attr) {
    var val = elem[attr]
    return (typeof val !== "undefined") ?
      val : elem.getAttribute(attr)
  },

  getValue: function (attr) {
     return this.getAttr(this.findElem(), attr)
  },

  domInit: function () {
    var self = this, elem = this.findElem()

    this.setId()

    for (var attr in this.triggers) {
      var trigger = this.triggers[attr]
      elem.addEventListener(trigger, function (ev) {
        self.update(elem, self.getValue(attr))
      })
    }
  }
})

</script>

</dom-module>

<dom-module
  id="clickable-behavior">

  <template><content></content></template>

<script>

Polymer({

  is: "clickable-behavior",
  behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

  properties: {
    buttons: {
      type:Array,
      value: [1]
    }
  },
  domInit: function () {
    var self = this, elem = this.findElem()

    this.setId()

    this.value = 0
    if (this.buttons.indexOf(2) >= 0) {
      elem.addEventListener("contextmenu", function (ev) {
        ev.preventDefault()
        self.update(elem, 2)
        return false
      })
    }
    if (this.buttons.indexOf(1) >= 0 || this.buttons.indexOf(3) >= 0) {
      elem.addEventListener("click", function (ev) {
        if (ev.button == 0 && self.buttons.indexOf(1) >= 0) {
          // Left click
          self.update(elem, 1)
        } else if(ev.button == 1 && self.buttons.indexOf(3) >= 0) {
          // Right click
          self.update(elem, 3)
        }
      })
    }
  }
})

</script>

</dom-module>



<dom-module
  id="signal-sampler" >

  <template><content></content></template>

<script>
Polymer({

    is: "signal-sampler",
    behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

    properties: {
      signals: {
        type: Array,
        value: function () { return []; }
      },
      triggers: {
        type: Array,
        value: function () { return []; }
      }
    },
    domInit: function () {
      var self = this,
      elem = this.findElem()

      this.setId()

      this.value = {}
      elem.addEventListener("signal-updated", function (ev) {
        if (self.triggers.indexOf(ev.detail.name) >= 0) { // TODO: use a set
          ev.stopPropagation()

          var result = {}
          for(var i=0, l=self.signals.length; i < l; i++) {
            var name = self.signals[i]
            var signal = Polymer.dom(elem).querySelector("#signal-" + name)
            result[name] = signal.getValue(Object.keys(signal.triggers)[0]) // the signal should only have a single trigger
          }
          result[ev.detail.name] = ev.detail.value
          result._trigger = ev.detail.name
          self.update(elem, result)
        } else if (self.signals.indexOf(ev.detail.name) >= 0) {
          ev.stopPropagation()
        }
      })
    }
})
</script>

</dom-module>

<dom-module
  id="signal-collector" >

  <template><content></content></template>

<script>
Polymer({

    is: "signal-collector",
    behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

    properties: {
      collectorName: String
    },
    domInit: function () {
      var self = this,
      elem = this.findElem()

      this.setId()
      this.value = elem.value
      elem.collectorNames = elem.collectorNames || []
      elem.collectorNames.push(this.collectorName)

      elem.addEventListener("signal-update-collector-" + this.collectorName, function (ev) {
        self.update(elem, {
          index: ev.detail.index,
          value: ev.detail.value
        })
        ev.stopPropagation()
      })
    }
})
</script>

</dom-module>

<dom-module
  id="signal-collect" >

  <template><content></content></template>

<script>
Polymer({

    is: "signal-collect",
    behaviors: [EscherMixins.LifeCycle],

    properties: {
      collectorName: String,
      index: Number
    },
    domInit: function () {
      var self = this,
          elem = Polymer.dom(this).parentNode

      this.value = elem.value

      var p = this
      // FIXME: Why doesn't bubbling work here??
      while (p !== document) {
        if (p.collectorNames && p.collectorNames.indexOf(this.collectorName) >= 0) {
          break
        }
        p = Polymer.dom(p).parentNode
      }

      console.log(p)

      elem.addEventListener("signal-updated", function (ev) {
        Polymer.Base.fire.call(p, "signal-update-collector-" + self.collectorName, {value: ev.detail.value, index: self.index}, {bubbles:false})
      })
    }
})
</script>

</dom-module>

<dom-module
  id="selectable-behavior" >

  <template><content></content></template>

<script>
Polymer({

  is: "selectable-behavior",
  behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

  properties: {
    name: String,
    multi: Boolean
  },
  domInit: function () {
    var self = this, elem = this.findElem()

    this.setId()
    var handler = function (ev) {
      var val = self.multi ? (elem.selectedValues || []) :
        (elem.selected || 0)

      self.update(elem, val)
    }

    elem.addEventListener("iron-select", handler)
    elem.addEventListener("iron-deselect", handler)
  }
})
</script>

</dom-module>


<dom-module
  id="keypress-behavior" >

  <template>
    <iron-a11y-keys id="keys" keys="{{keys}}"></iron-a11y-keys>

    <content></content>
  </template>

<script>
Polymer({

  is: "keypress-behavior",
  behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

  properties: {
    keys: {
      type: String,
      notify: true
    }
  },
  domInit: function () {
    var self = this, elem = this.findElem()

    this.setId()

    this.$.keys.target = elem
    this.$.keys.addEventListener("keys-pressed", function (ev) {
        var key = this.keyboardEventToKey(ev.detail.keyboardEvent)
        self.update(elem, key)
    })
  }
})
</script>

</dom-module>

<dom-module
  id="date-selection" >

  <template><content></content></template>

<script>

Polymer({

  is: "date-selection",
  behaviors: [EscherMixins.LifeCycle, EscherMixins.ReactiveSignal],

  domInit: function () {

    var self = this, elem = this.findElem()

    this.setId()

    elem.addEventListener("date-picked", function (ev) {
      var d = elem.immediateDate
      var val = {
        "year" : d.getFullYear(),
        "month": d.getMonth() + 1,
        "day": d.getDate()
      }
      self.update(elem, val)
    })

  }
})

</script>

</dom-module>
